簡介:本課程帶領大家學習新一代的網頁布局方案,彌補了之前網頁布局的很多不足。CSS網格布局(又名“網格”)是一個二維的基于網格的布局系統,其目的只在于完全改變我們設計基于網格的用戶界面的方式。
第1章 Grid布局介紹
本章節主要介紹Grid布局的發展趨勢與前景、優勢、以及兼容性。
第2章 一些概念
本章節,主要介紹了網格布局中的一些常見概念,便于大家學習更加專業的內容,以及很好的掌握布局內容。
第3章 容器中的屬性
本章節主要帶領大家學習Grid布局中的一些常用屬性,并結合案例為大家展示Grid布局的精妙之處。
- 視頻: 3-1 display (11:06)
- 視頻: 3-2 grid-template 定義行與列的軌道大小 (19:41)
- 視頻: 3-3 grid-template 定義網格線名字 (06:05)
- 視頻: 3-4 grid-template-areas (10:46)
- 視頻: 3-5 grid-template 簡寫 (10:45)
- 視頻: 3-6 gap 行與列的間距 (06:15)
- 視頻: 3-7 gap 簡寫 (02:59)
- 視頻: 3-8 items (10:22)
- 視頻: 3-9 content (08:33)
- 視頻: 3-10 grid-auto (07:58)
- 視頻: 3-11 grid簡寫形式 (04:17)
第4章 CSS函數
本章節,主要帶領大家學習Grid布局中的的三個函數,并結合例子進行剖析。
第5章 網格項上的屬性
本章節,主要帶領大家學習網格項上的屬性,并結合實例進行分析。